<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->
<ng-container *transloco="let t; read: 'auth'">
  <tg-title [title]="t('reset_password.title')"></tg-title>
  <ng-container *ngIf="(resetPasswordConfirmation$ | async) === false">
    <main class="auth">
      <tg-auth-forest>
        <tg-ui-context-notification
          *ngIf="expirationToken"
          class="notification"
          status="warning"
          data-test="expiration-token"
          size="l"
          [hasIcon]="true">
          <div class="expiration-token-text">
            <p class="title">
              {{ t('reset_password.expired_invitation.title') }}
            </p>
            <p>{{ t('reset_password.expired_invitation.description') }}</p>
          </div>
        </tg-ui-context-notification>
        <div class="auth-wrapper">
          <img
            class="taiga-logo"
            role="presentation"
            width="56"
            height="56"
            ngSrc="/assets/images/LogoTaiga.svg"
            alt="" />
          <h1 class="auth-title">{{ t('reset_password.title') }}</h1>
          <p class="description">{{ t('reset_password.description') }}</p>
          <form
            #form="ngForm"
            [showFormErrors]="form.submitted"
            [formGroup]="resetPasswordForm"
            (ngSubmit)="submit()">
            <tg-ui-input
              class="input-email"
              [label]="t('signup.email')">
              <input
                formControlName="email"
                data-test="reset-password-email"
                inputRef />
              <ng-container inputError>
                <tg-ui-error
                  data-test="reset-password-required-email"
                  error="required">
                  {{ t('signup.errors.email_required') }}
                </tg-ui-error>
                <tg-ui-error
                  data-test="reset-password-invalid-email"
                  error="email">
                  {{ t('signup.errors.invalid_email') }}
                </tg-ui-error>
              </ng-container>
            </tg-ui-input>

            <button
              loading
              [loadingMsg]="t('reset_password.send_in_progress')"
              [loadingSuccess]="t('reset_password.send_success')"
              class="submit-reset-password"
              data-test="reset-password-submit-button"
              appearance="primary"
              tuiButton
              type="submit">
              {{ t('reset_password.submit') }}
            </button>

            <p
              withInternalLink
              class="go-back"
              [innerHtml]="
                t('reset_password.go_back', {
                  login: 'login' | getUrl
                })
              "></p>
          </form>
        </div>
      </tg-auth-forest>
    </main>
    <footer class="auth-footer">
      <p class="sign-up-link">
        <span>{{ t('login.not_registered_yet') }} </span>
        <a [routerLink]="['/signup']">{{ t('login.create_free_account') }}</a>
      </p>
    </footer>
  </ng-container>
  <ng-container *ngIf="resetPasswordConfirmation$ | async">
    <div class="verify">
      <div
        class="verify-container"
        data-test="verify-email-page">
        <img
          class="owl"
          ngSrc="/assets/images/signup/verify-email-owl.svg"
          width="180"
          height="146"
          alt="" />
        <h1 class="verify-title">{{ t('reset_password.confirm.title') }}</h1>
        <p class="verify-text">{{ t('reset_password.confirm.description') }}</p>
        <p
          class="verify-text email"
          data-test="reset-password-confirmation-email">
          {{ resetPasswordForm.get('email')?.value }}
        </p>
        <p class="verify-text">
          <button
            [routerLink]="['/login']"
            tuiButton>
            {{ t('reset_password.confirm.back') }}
          </button>
        </p>
        <p class="verify-footer">
          <span>{{ t('reset_password.confirm.new_email') }}</span>
          <a
            class="verify-footer-sign-up"
            [routerLink]="['/signup']">
            {{ t('reset_password.confirm.create_account') }}
          </a>
        </p>
      </div>
    </div>
  </ng-container>
</ng-container>
